import React from 'react'
import { Button, Upload, Modal, Form, Input, Select, DatePicker, Radio, Table, Popconfirm, InputNumber } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { Link } from 'react-router-dom';
const { Option } = Select;
import '../assets/styles/Ystepone.less'
import { history } from 'umi';
import { instance } from '../../../api/request'

//查找对应商品的规格表以及价格

export default function Ystepone() {
    const subValut: any = React.createRef()
    const [previewVisible, setpreviewVisible] = useState(false)
    const [previewImage, setpreviewImage] = useState('')
    const [previewTitle, setpreviewTitle] = useState('')
    const [fileList, setfileList] = useState([])
    const [radio, setradio] = React.useState<any>(false)
    const [actNum, setactNum] = React.useState<any>(1)
    const [dataSource, setdataSource] = useState<any>([])
    const [check, setcheck] = useState<any>({})
    const [arrs, setarr] = useState([])
  
    React.useEffect((): any => {

        setcheck(history.location.query)
        const objs: any = history.location.query
        findData(objs)
    }, [])

    async function findData(objs: any) {

        const res = await instance.post('/shopBoth/findType', objs)

     
       
        var datarr: any = []
        res.data.forEach((item: any, index: any) => {

            let objin = JSON.parse(item.specification)
            const eachObj = {
              
                internal: objin.internal,
                color: objin.color,
                sellingprice: item.sellingprice,
                costprice: item.costprice,
                inventory: item.inventory,
                serialnumber: item.serialnumber,
                weight: item.weight,
                volume: item.volume
            }
            datarr.push(eachObj)


        })
        datarr.forEach((ite: any, index: any) => {
            ite.key = index
        })
        setarr(datarr)
        setdataSource(datarr)

    }


    function handleCancel() {
        setpreviewVisible(false)
    }


    const uploadButton = (
        <div>
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    )
    //添加商品
    async function onFinish(e: any) {
        
        
        const date = e.date.format('YYYY-MM-DD HH:mm:ss')
        const formData = new FormData();
        fileList.forEach((file: any) => {
            console.log(file);

            formData.append('file', file.originFileObj);
        })
        formData.append('sid', check.actId)
        formData.append('designation', e.designation)
        formData.append('surfaceplot', check.surfaceplot)
        formData.append('date', date)
        formData.append('actIntro', e.actIntro)
        formData.append('unit', e.unit)
        formData.append('freight', e.freight)
        formData.append('actNum', actNum)
        formData.append('state', radio)
        const res: any = await instance.post('/seckillShop', formData)
        var newsarr:any=[]
        arrs.forEach((item:any)=>{
            const eachObj = {
                pid:res.data.id,
                internal:item.internal,
                color: item.color,
                sellingprice: item.sellingprice,
                costprice: item.costprice,
                inventory: item.inventory,
                serialnumber: item.serialnumber,
                weight: item.weight,
                volume: item.volume
            }
           newsarr.push(eachObj)
        })
        console.log(newsarr,81);
        
        const res1: any = await instance.post('/seckillShop/specification', newsarr)
        if (res.code == 200 && res1.code == 200) {
         
            history.push({
                pathname: '/Ysteptwo',
                query: res.data
            })
        }
      

    }


    function onGenderChange(e: any) {
        console.log(e, 58);
    }

    function changeRadio(e: any) {
        setradio(e.target.value);
    }

    function actionNum(e: any) {
        setactNum(e)

    }

    function seckillPrice(e: any, record: any) {
        arrs.forEach((item: any) => {
            if (item.color == record.color) {
                item.seckillPrice = e
            }
        })
    }

    function limited(e: any, record: any) {
        arrs.forEach((item: any) => {
            if (item.color == record.color) {
                item.limitNum = e
            }
        })

    }
    function handleChange({ fileList }: any) {
        setfileList(fileList)
    }


    const columns: any = [

        {
            title: '颜色',
            dataIndex: 'color',
            key: 'color',
        },
        // {
        //     title: '图片',
        //     dataIndex: 'img',
        //     render: (_: any, record: any) => {
        //         return <>
        //             <div style={{ display: 'flex' }}> 
        //                    <img style={{ width: '4rem', height: '4rem', marginRight: '0.5rem' }} src={record.img} />
        //             </div>
        //         </>
        //     }
        // },
        {
            title: '内存',
            dataIndex: 'internal',
            key: 'internal',
        },
        {
            title: '秒杀价',
            key: 'seckillPrice',
            render: (_: any, record: any) => {

                return <>
                    <InputNumber min={1} max={100} defaultValue={11} onChange={e => seckillPrice(e, record)} />
                </>
            }
        },
        {
            title: '成本价',
            dataIndex: 'costprice',
            key: 'costprice'
        },
        {
            title: '原价',
            dataIndex: 'sellingprice',
            key: 'sellingprice'
        },
        {
            title: '商品编号',
            dataIndex: 'serialnumber',
            key: 'serialnumber'
        },
        {
            title: '限量',
            key: 'limitNum',
            render: (_: any, record: any) => {

                return <>
                    <InputNumber min={100} max={200} defaultValue={100} onChange={e => limited(e, record)} />
                </>
            }
        },

        {
            title: '重量',
            dataIndex: 'weight',
            key: 'weight'
        },
        {
            title: '体积',
            dataIndex: 'volume',
            key: 'volume'
        },
    ]
    return (


        <div className="Ystepone">

            <Form
                name="basic"

                ref={subValut}
                onFinish={(e) => onFinish(e)}

            >

                <Form.Item label="商品主图" name="img">
                    <img src={check.surfaceplot}></img>
                </Form.Item>
                <Form.Item
                    label="商品轮播图"
                >
                    <Upload

                        listType="picture-card"
                        fileList={fileList}

                        onChange={handleChange}
                    >
                        {fileList.length >= 4 ? null : uploadButton}
                    </Upload>
                    <Modal
                        visible={previewVisible}
                        title={previewTitle}
                        footer={null}
                        onCancel={handleCancel}
                    >
                        <img alt="example" style={{ width: '100%' }} src={previewImage} />
                    </Modal>
                </Form.Item>
                <Form.Item label="商品标题" name="designation">
                    <Input placeholder={check.designation} />
                </Form.Item>
                <Form.Item label="秒杀活动介绍" name="actIntro">
                    <Input placeholder={check.actIntro} />
                </Form.Item>
                <Form.Item label="单位" name="unit">
                    <Input placeholder={check.unit} />
                </Form.Item>
                <Form.Item name="freight" label="运费模板" >
                    <Select
                        placeholder={check.freight} onChange={e => onGenderChange(e)}
                    >
                        <Option value="包邮">包邮</Option>
                        <Option value="不包邮">不包邮</Option>

                    </Select>
                </Form.Item>
                <Form.Item label="当天参与活动次数">
                    <InputNumber min={1} max={10} defaultValue={1} onChange={e => actionNum(e)} />
                </Form.Item>
                <Form.Item label="活动日期" name="date">
                    <DatePicker />
                </Form.Item>
                <Form.Item label="活动状态">
                    <Radio.Group onChange={e => changeRadio(e)} value={radio}>
                        <Radio value={true}>开启</Radio>
                        <Radio value={false}>关闭</Radio>

                    </Radio.Group>
                </Form.Item>

                <Form.Item label="商品属性">
                    <Table dataSource={dataSource} columns={columns} ></Table>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit" >
                        下一步
                        {/* <Link to="/Ysteptwo"> 下一步</Link> */}
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}



